<template>
  <div class="home">
    <div class="home-header">header</div>
    <div class="home-content">
      <div class="home-content-sider">
        <ul class="home-content-sider-menu">
          <li v-for="(item, i) in menuArr"
              :key="`sider-menu-${i}`">
            <a @click="handlMenuSelect(item.name)">{{item.text}}</a>
          </li>
        </ul>
      </div>
      <div class="home-content-content"><router-view/></div>
    </div>
    <div class="home-footer">footer</div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      menuArr: [
        {
          name: 'Main',
          text: '首页'
        },
        {
          name: 'Dashboard',
          text: '仪表盘'
        }
      ]
    }
  },
  methods: {
    handlMenuSelect (name) {
      this.$router.push({ name })
    }
  }
}
</script>

<style lang="scss">
@import '@/index.scss';

@include b(home) {
  width: 100%;
  height: 100%;
  @include m(header) {
    background-color: #ccc;
  }
  @include m(content) {
    display: flex;
    width: 100%;
    height: 100%;
    &-sider {
      flex-basis: 200px;
      background-color: rgb(58, 202, 106);
      &-menu {
        background-color: rgb(189, 204, 55);
      }
    }
    &-content {
      flex-grow: 1;
      background-color: rgb(50, 137, 143);
    }
  }
  @include m(footer) {
    background-color: #ccc;
  }
}
</style>
